import React,{Component} from 'react';
import {Route,Link} from 'react-router-dom';
import HeadBack from '../../components/headBack';
import datalist from '../../utils/localData';
import {ScrollTop} from '../../utils/DomApi';
import FadeIn from '../../components/fadeIn';
import LazyLoad from 'react-lazyload';
import './style.scss'
let _scrollfn;
export default class extends Component {
    constructor(props){
       super(props)
        const {id}=this.props.match.params;
        this.state={
           dataList:datalist,
           activeId:id||datalist[0].id,
           showEnter:true,
            start:{}
        }
        ScrollTop(0);

    }

    componentDidMount() {
        _scrollfn=()=> {
            let doc=  document.getElementsByTagName('body')[0];
            if((doc.clientHeight-document.documentElement.clientHeight)<ScrollTop()+100||(ScrollTop()==0)){
                this.setState(()=>{
                    return {
                        showEnter: true
                    }
                });
            }
        }
        window.addEventListener('scroll',_scrollfn);
    }

    componentWillUnmount(){
        window.removeEventListener('scroll',_scrollfn);
        ScrollTop(0);
    }
    setActive(id){
        this.props.history.replace('/home/brand/'+id)
        this.setState(()=>{
           return {
               activeId:id,
               showEnter: true
           }
        });
        ScrollTop(0);
    }
    touchMove(e){
        let isTouchY=Math.abs(e.touches[0].clientX-this.state.start.X)<Math.abs(e.touches[0].clientY-this.state.start.Y);
        let doc=  document.getElementsByTagName('body')[0];
        let isBottm=((doc.clientHeight-document.documentElement.clientHeight)<ScrollTop()+100);
        if(isTouchY){
            if(e.touches[0].clientY-this.state.start.Y>0){
                this.setState(()=>{
                    return{
                        showEnter: true
                    }
                })
            }else if(!isBottm){
                this.setState(()=>{
                    return{
                        showEnter: false
                    }
                })
            }
        }
    }

    render(){
        const {dataList,activeId}=this.state;
        const {history}=this.props;
        function imgList(item) {
            const arr=[];
            for(let i=0;i<item.introLength;i++){
               arr.push(
                   <img key={i} src={item.url+(i+1)+item.suffix} alt=""/>
               )
            }
            return arr;
        }
        return (<div className={'brand'} onTouchStart={(e)=>{this.state.start={
            X:e.touches[0].clientX,
            Y:e.touches[0].clientY
        }}} onTouchMove={(e)=>{this.touchMove(e)}}>
            <HeadBack  {...this.props}  title={'品牌'}></HeadBack>
            <div className={'brand_nav'}>
                <ul>
                    {
                      dataList.map((item,index)=>{
                          return <li onClick={()=>{this.setActive(item.id)}} key={item.id} className={item.id==activeId?'active':''}>{item.name}</li>
                      })
                    }
                </ul>
            </div>
            <div className={'brand_body'}>
                <p onClick={()=>{history.push('/home/brandClass/'+activeId)}} className={this.state.showEnter?'showEnter':''}>点击进入产品</p>
                {dataList.map((item,index)=>{
                    return item.id==activeId?
                        <FadeIn key={item.id}>
                            {imgList(item)}
                        </FadeIn>
                     :''
                })}
            </div>
        </div>)
    }
}